<template>
  <view class="page flex-col">
    
    <view class="group_4 flex-row">
      <view class="image-text_5 flex-row">
        <image
          class="label_1"
          referrerpolicy="no-referrer"
          src="./imgs/file-icon.png"
        />
        <view class="text-group_6 flex-col">
          <text class="text_4">{{ constants.experiment_name }}</text>
          <text class="text_5">{{ constants.updated }}</text>
        </view>
      </view>
    </view>
    <view class="group_5 flex-col">
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验目的</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.objective"></text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验仪器和素材</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.instrument_equipment">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验原理</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.principle">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验步骤</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.steps">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">数据记录</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.data_records">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">实验结果</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.result">
        </text>
      </view>
      <view class="box_4 flex-row justify-start">
        <view class="group_7 flex-col"></view>
        <text class="text_6">误差分析</text>
      </view>
      <view class="text-wrapper_9 flex-row">
        <text class="text_7" v-html="constants.error_analysis">
        </text>
      </view>
    </view>
    <view class="group_12 flex-col">
      <view class="box_8 flex-row justify-between">
        <view class="section_1 flex-row">
          <view class="image-text_6 flex-row justify-between" @click="goBack">
            <image
              class="thumbnail_13"
              referrerpolicy="no-referrer"
              src="./imgs/back.png"
            />
            <text class="text-group_3">返回</text>
          </view>
        </view>
        <view class="text-wrapper_4 flex-col" @click="toggle">
          <text class="text_12">下载报告</text>
        </view>
      </view>
    </view>
  </view>
  <view>
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" class="my-popup" type="bottom" background-color="#fff" borderRadius="12px 12px 0px 0px">
      <view class="popup-content">
        <view class="group_5 flex-col">
          <view class="box_9 flex-row justify-between">
            <text class="text_12">选择下载格式</text>
            <image
                @click="closePop"
                class="thumbnail_7"
                referrerpolicy="no-referrer"
                src="./imgs/close.png"
            />
          </view>
          <view class="section_2 flex-row justify-between" v-for="(item,index) in options" :key="index" @click="change(item)">
            <text class="text_13" :class="{'active': selOpt == item.value}">{{ item.label }}</text>
            <image
                v-if="selOpt == item.value"
                class="thumbnail_13"
                referrerpolicy="no-referrer"
                src="./imgs/check.png"
            />
          </view>
          <view class="text-wrapper_9 flex-col" @click="confirmSel">
            <text class="text_17">下载</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {baseUrl} from "../../config";
	export default {
	  data() {
	    return {
        constants: {},
        report_id: '',
        options: [{
          "value": 1,
          "label": "PDF",
          "tag": "",
          "text": "PDF"
        },{
          "value": 2,
          "label": "WORD",
          "tag": "",
          "text": "WORD"
        },],
        selOpt: null,
        baseUrl: baseUrl,
      };
	  },
    async onLoad(option) {
      this.report_id = option.report_id
      this.handleGetReportDetail()
    },
	  methods: {
		  goBack(){
        uni.navigateBack({
          delta: 1
        });
		  },
      async handleGetReportDetail(){
        let param = {
          report_id: this.report_id,
        }
        let res = await this.API.ReportFetchModel(param)
        console.log('rrrrrr',res)
        this.constants = res
		  },
      toggle(){
        console.log('this.$refs.popup',this.$refs.popup)
        this.$refs.popup.open()
      },
      closePop(){
        this.$refs.popup.close()
      },
      change(item){
        this.selOpt = item.value
      },
      confirmSel(){
        this.closePop()
        this.handleDownLoad()
      },
		  handleDownLoad(){
        if(this.selOpt == 1){
          uni.downloadFile({
            url:`${this.baseUrl}/api/StudentExperiment/PdfForStudentExperiment?student_experiment_id=${this.constants.student_experiment_id}`, //仅为示例，并非真实的资源
            success: (res) => {
              if (res.statusCode === 200) {
                var filePath = res.tempFilePath;
                uni.openDocument({
                  filePath: filePath,
                  showMenu: true,
                  success: function (res) {
                    console.log('打开文档成功');
                  }
                });
              }
            }
          });
        } else if(this.selOpt == 2){
          uni.downloadFile({
            url:`${this.baseUrl}/api/StudentExperiment/WordForStudentExperiment?student_experiment_id=${this.constants.student_experiment_id}`, //仅为示例，并非真实的资源
            success: (res) => {
              if (res.statusCode === 200) {
                var filePath = res.tempFilePath;
                uni.openDocument({
                  filePath: filePath,
                  showMenu: true,
                  success: function (res) {
                    console.log('打开文档成功');
                  },
                });
              }
            }
          });
        } else {
          uni.showToast({
            title: '请选择下载格式',
            icon: "none",
          });
        }
		  },
	  },
	};
</script>

<style scoped lang="less">
  .my-popup{
    z-index: 999!important;
  }
  .popup-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    overflow: hidden;
    border-radius: 12px 12px 0px 0px;
    .group_5 {
      background-color: rgba(255, 255, 255, 1);
      padding: 44rpx 48rpx 18rpx 48rpx;
    }

    .box_9 {
      width: 654rpx;
    }

    .text_12 {
      overflow-wrap: break-word;
      color: rgba(38, 38, 38, 1);
      font-size: 36rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      white-space: nowrap;
      line-height: 50rpx;
    }

    .thumbnail_7 {
      width: 40rpx;
      height: 40rpx;
      margin-bottom: 10rpx;
    }

    .section_2 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      width: 654rpx;
      margin-top: 32rpx;
      padding: 36rpx 0 40rpx 0;
    }

    .text_13 {
      overflow-wrap: break-word;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 1);
      font-family: PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      white-space: nowrap;
      line-height: 52rpx;
      &.active{
        color: rgba(39, 118, 255, 1);
      }
    }

    .thumbnail_13 {
      width: 40rpx;
      height: 40rpx;
      margin: 8rpx 0 4rpx 0;
    }

    .text-wrapper_6 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      padding: 36rpx 462rpx 40rpx 0;
    }

    .text_14 {
      overflow-wrap: break-word;
      color: rgba(0, 0, 0, 1);
      font-size: 32rpx;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 52rpx;
    }

    .text-wrapper_7 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      padding: 36rpx 430rpx 40rpx 0;
    }

    .text_15 {
      overflow-wrap: break-word;
      color: rgba(0, 0, 0, 1);
      font-size: 32rpx;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 52rpx;
    }

    .text-wrapper_8 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      padding: 36rpx 462rpx 40rpx 0;
    }

    .text_16 {
      overflow-wrap: break-word;
      color: rgba(0, 0, 0, 1);
      font-size: 32rpx;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 52rpx;
    }

    .text-wrapper_9 {
      background-color: rgba(39, 118, 255, 1);
      border-radius: 6px;
      margin: 80rpx 8rpx 0 10rpx;
      padding: 22rpx 284rpx 22rpx 284rpx;
    }

    .text_17 {
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 34rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      text-align: right;
      white-space: nowrap;
      line-height: 48rpx;
    }
  }
	.page {
	  background-color: rgba(248, 248, 248, 1);
	  position: relative;
	  width: 750rpx;
    height: calc(100vh - 96rpx);
	  overflow: hidden;
	}
	
	.group_1 {
	  background-color: rgba(255, 255, 255, 1);
	  padding: 28rpx 28rpx 22rpx 42rpx;
	}
	
	.section_2 {
	}
	
	.text-wrapper_8 {
	  width: 108rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  font-size: 0;
	  letter-spacing: -0.2800000011920929px;
	  font-family: PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 40rpx;
	}
	
	.text_15 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 28rpx;
	  font-family: PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	}
	
	.text_16 {
	  overflow-wrap: break-word;
	  color: rgba(255, 255, 255, 1);
	  font-size: 28rpx;
	  font-family: PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	}
	
	.thumbnail_10 {
	  width: 34rpx;
	  height: 22rpx;
	  margin: 8rpx 0 10rpx 438rpx;
	}
	
	.thumbnail_11 {
	  width: 30rpx;
	  height: 22rpx;
	  margin: 6rpx 0 12rpx 10rpx;
	}
	
	.image_5 {
	  width: 50rpx;
	  height: 24rpx;
	  margin: 6rpx 0 10rpx 10rpx;
	}
	
	.section_3 {
	  width: 666rpx;
	  margin: 42rpx 12rpx 0 2rpx;
	}
	
	.thumbnail_12 {
	  width: 40rpx;
	  height: 40rpx;
	  margin: 2rpx 0 10rpx 0;
	}
	
	.text_3 {
	  overflow-wrap: break-word;
	  color: rgba(38, 38, 38, 1);
	  font-size: 36rpx;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 52rpx;
	}
	
	.thumbnail_4 {
	  width: 40rpx;
	  height: 8rpx;
	  margin: 22rpx 0 22rpx 0;
	}
	
	.group_4 {
	  box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
	  background-color: rgba(255, 255, 255, 1);
	  padding: 24rpx 208rpx 24rpx 32rpx;
    height: 140rpx;
	}
	
	.image-text_5 {
	  width: 510rpx;
	}
	
	.label_1 {
	  width: 92rpx;
	  height: 92rpx;
    margin-right: 10rpx;
	}
	
	.text-group_6 {
	  margin: 4rpx 0 4rpx 0;
	}
	
	.text_4 {
	  overflow-wrap: break-word;
	  color: rgba(51, 51, 51, 1);
	  font-size: 28rpx;
	  font-family: PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin-right: 226rpx;
	}
	
	.text_5 {
	  overflow-wrap: break-word;
	  color: rgba(102, 102, 102, 1);
	  font-size: 28rpx;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin-top: 4rpx;
	}
	
	.group_5 {
	  background-color: rgba(255, 255, 255, 1);
	  margin-top: 16rpx;
	  padding: 32rpx 32rpx 68rpx 0;
    overflow-y: scroll;
    flex: 1;
	}
	
	.box_4 {
	  width: 100%;
	  //margin-right: 274rpx;
	}
	
	.group_7 {
	  background-color: rgba(39, 118, 255, 1);
	  width: 8rpx;
	  height: 24rpx;
	  margin: 8rpx 20rpx 8rpx 0;
	}
	
	.text_6 {
	  overflow-wrap: break-word;
	  color: rgba(38, 38, 38, 1);
	  font-size: 28rpx;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	}
	
	.text-wrapper_9 {
	  margin: 16rpx 0 0 32rpx;
	}
	
	.text_7 {
	  width: 686rpx;
	  //height: 600rpx;
	  overflow-wrap: break-word;
	  color: rgba(38, 38, 38, 1);
	  font-size: 28rpx;
	  font-weight: normal;
	  text-align: justify;
	  line-height: 40rpx;
	}
	
	.box_5 {
	  width: 228rpx;
	  margin: 32rpx 490rpx 0 0;
	}
	
	.box_1 {
	  background-color: rgba(39, 118, 255, 1);
	  width: 8rpx;
	  height: 24rpx;
	  margin: 8rpx 0 8rpx 0;
	}
	
	.text_8 {
	  overflow-wrap: break-word;
	  color: rgba(38, 38, 38, 1);
	  font-size: 28rpx;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	}
	
	.text-wrapper_10 {
	  margin: 16rpx 0 0 32rpx;
	}
	
	.text_9 {
	  width: 686rpx;
	  height: 600rpx;
	  overflow-wrap: break-word;
	  color: rgba(38, 38, 38, 1);
	  font-size: 28rpx;
	  font-weight: normal;
	  text-align: justify;
	  line-height: 40rpx;
	}
	
	.box_6 {
	  margin: 32rpx 0 0 32rpx;
	}
	
	.group_10 {
	  background-color: rgba(234, 234, 234, 1);
	  width: 686rpx;
	  height: 306rpx;
	}
	
	.box_7 {
	  width: 718rpx;
	  margin-top: 32rpx;
	}
	
	.box_2 {
	  background-color: rgba(39, 118, 255, 1);
	  width: 8rpx;
	  height: 24rpx;
	  //margin: 8rpx 0 624rpx 0;
	}
	
	.text-group_7 {
	}
	
	.text_10 {
	  overflow-wrap: break-word;
	  color: rgba(38, 38, 38, 1);
	  font-size: 28rpx;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 40rpx;
	  margin-right: 490rpx;
	}
	
	.text_11 {
	  width: 686rpx;
	  height: 600rpx;
	  overflow-wrap: break-word;
	  color: rgba(38, 38, 38, 1);
	  font-size: 28rpx;
	  font-weight: normal;
	  text-align: justify;
	  line-height: 40rpx;
	  margin-top: 16rpx;
	}
	
	.group_12 {
	  background-color: rgba(255, 255, 255, 1);
	  margin-top: 24rpx;
	  padding: 26rpx 32rpx 18rpx 32rpx;
    height: calc(48rpx + 40rpx + 26rpx + 18rpx + 24rpx);
  }
	
	.box_8 {
	  width: 686rpx;
	}
	
	.section_1 {
	  background-color: rgba(255, 255, 255, 1);
	  border-radius: 6px;
	  border: 1px solid rgba(230, 235, 241, 1);
	  padding: 20rpx 22rpx 20rpx 22rpx;
	}
	
	.image-text_6 {
	  width: 116rpx;
	}
	
	.thumbnail_13 {
	  width: 40rpx;
	  height: 40rpx;
	  margin: 4rpx 0 4rpx 0;
	}
	
	.text-group_3 {
	  overflow-wrap: break-word;
	  color: rgba(38, 38, 38, 1);
	  font-size: 34rpx;
	  font-weight: normal;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 48rpx;
	}
	
	.text-wrapper_4 {
	  background-color: rgba(255, 255, 255, 1);
	  border-radius: 6px;
	  border: 1px solid rgba(39, 118, 255, 1);
	  padding: 22rpx 174rpx 18rpx 176rpx;
	}
	
	.text_12 {
	  overflow-wrap: break-word;
	  color: rgba(39, 118, 255, 1);
	  font-size: 34rpx;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 48rpx;
	}
	
	.image-wrapper_3 {
	  width: 268rpx;
	  align-self: center;
	  margin-top: 66rpx;
	}
	
	.image_6 {
	  width: 268rpx;
	  height: 10rpx;
	}

</style>